<template>
  <div class="dashboard-container" v-loading="loading">
    <template v-if="!ajaxing">
      <template v-if="portalId">
        <PortalLayout :layout="layout" v-if="type === 0" />
        <div class="custom-page" v-if="type === 1">
          <component :is="currentView" v-if="linkType === 0" />
          <embed :src="url" width="100%" height="100%" type="text/html" v-if="linkType === 1" />
        </div>
      </template>
      <div class="portal-layout-nodata" v-else>
        <img src="@/assets/images/dashboard-nodata.png" alt="" class="layout-nodata-img" />
        <p class="layout-nodata-txt">暂无数据</p>
      </div>
    </template>
    <!-- 取消切换门户 -->
    <Setting ref="Setting" @refresh="refresh" />
    <el-button v-if="setOpenshow" type="primary" icon="el-icon-arrow-left" size="large" class="setting-btn"
      @click="$refs.Setting.init(portalId)"></el-button>
      <div class="changePsd">
      <el-dialog  :visible.sync="dialogPsdVisible" width="500px" :show-close="false"
        :close-on-click-modal="false" :close-on-press-escape="false" custom-class="dialog_style">
        <ChangePsd ref="password" v-if="dialogPsdVisible" :psdFormSpan="24" :showtitle="false" saveBtnAlign="center">
        <div class="jsbos-common-title mb-20" style="color:#303133;display: flex;align-items: center;line-height: 40px;flex-direction: column;">
          <h3>欢迎使用智行平台，请修改默认密码</h3>
          <p><span style="color: #606266;letter-spacing: 1px;"><i class="el-icon-info"></i>初始默认密码 RongKe@888</span></p>
        </div>
        </ChangePsd>
      </el-dialog>
    </div>


    <!-- 个人信息检测,弹出完善信息框 -->
    <el-dialog title="基础信息" :visible.sync="dialogVisible" width="50%" :show-close="true" :close-on-click-modal="true"
      :close-on-press-escape="false">
      <UserInfo :user="userInfoData" currentIndex="user" @closeModal="handleClose" />
      <span slot="footer" class="dialog-footer"> </span>
    </el-dialog>
  </div>
</template>

<script>
import { getAuthPortal, getPortalSelector } from "@/api/onlineDev/portal";
import Setting from "./Setting";
import PortalLayout from "@/components/VisualPortal/Layout";
import { mapGetters } from "vuex";
import { UserSettingInfo } from "@/api/permission/userSetting.js";
import UserInfo from "@/views/basic/profile/components/UserInfo.vue";//完善个人信息
import ChangePsd from '@/views/basic/profile/components/Password.vue'

export default {
  name: "dashboard",

  components: { Setting, PortalLayout, UserInfo, ChangePsd },
  data() {
    return {
      portalId: "",
      layout: [],
      type: null,
      linkType: null,
      currentView: null,
      url: "",
      ajaxing: true,
      loading: false,
      // 如果门户为1+，就展示切换门户，否则不显示,默认不显示
      setOpenshow: false,
      dialogVisible: false,
      userInfoData: {},
      dialogPsdVisible: false
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  created() {
    this.getuserInfo();//检测个人信息是否完整
    this.portalId = this.userInfo.portalId;
    this.getData();
    this.getsPortalSelector();
  },
  methods: {
    // 获取userInfo判断是否合理
    getuserInfo() {
      console.log('thsidfsdf', this.userInfo);
      if (this.userInfo.isNeedUpdatePwd) {
        this.dialogPsdVisible = true;
        return;
      }
      UserSettingInfo().then((res) => {
        this.userInfoData = res.data;
        if (!this.userInfoData.mobilePhone) {
          // 错误提示
          this.$message({
            showClose: true,
            message: "请填完善姓名，手机号，性别等基础信息",
            type: "error",
          });
          // 完善信息框
          setTimeout(() => {
            this.dialogVisible = true;
          }, 1000);
        }
        if (this.userInfoData.gender == "3") {
          // 错误提示
          this.$message({
            showClose: true,
            message: "性别为空，请认真填写！",
            type: "error",
          });
          // 完善信息框
          setTimeout(() => {
            this.dialogVisible = true;
          }, 1000);
        }
      });
    },
    handleClose() {
      this.dialogVisible = false;
    },
    getData() {
      this.loading = true;
      this.layout = [];
      if (!this.portalId) {
        this.loading = false;
        this.ajaxing = false;
        return;
      }
      getAuthPortal(this.portalId)
        .then((res) => {
          this.type = res.data.type || 0;
          this.linkType = res.data.linkType || 0;
          this.url = res.data.customUrl;
          if (res.data) {
            if (res.data.type === 1) {
              if (res.data.customUrl && res.data.customUrl !== 1) {
                this.currentView = (resolve) =>
                  require([`@/views/${res.data.customUrl}`], resolve);
              }
            } else {
              if (res.data.formData) {
                let formData = JSON.parse(res.data.formData);
                this.layout = formData.layout || [];
              }
            }
          }
          this.ajaxing = false;
          setTimeout(() => {
            this.loading = false;
          }, 500);
        })
        .catch(() => {
          this.loading = false;
          this.ajaxing = false;
        });
    },
    refresh(id) {
      if (!id) return;
      this.portalId = id;
      this.getData();
    },
    async getsPortalSelector() {
      let res = await getPortalSelector();
      // console.log(res.data.list.length);
      if (res.data.list.length > 1) {
        this.setOpenshow = true;
      } else if (res.data.list) {
        let a = 0;
        res.data.list.forEach((el) => {
          a += el.children.length;
          if (a > 1) {
            return (this.setOpenshow = true);
          }
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.dashboard-container {
  width: 100%;
  height: 100%;
  background: #ebeef5;
  position: relative;

  .custom-page {
    width: 100%;
    height: 100%;
  }

  >>>.layout-area {
    width: 100%;
    border-radius: 4px;
    overflow: hidden;
  }

  .setting-btn {
    position: absolute;
    top: 200px;
    right: -10px;
    height: 40px;
    width: 40px;
    text-align: center;
    padding: 0;
    border-radius: 20px 0 0 20px;
    z-index: 100;

    >>>i {
      font-size: 20px;
      font-weight: 580;
    }
  }

  >>>.vue-grid-layout {
    margin: -10px;
  }

  >>>.el-scrollbar__view {
    overflow: hidden;
  }

  .changePsd {
    >>>.el-dialog__header {
      display: none !important;
    }

    >>>.el-dialog__body {
      padding: 10px 20px;
    }
  }
}
</style>
